﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>给我的挚爱</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: url('your-background-image.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: 'KaiTi', cursive;
            color: #fff;
            overflow: hidden;
        }
        .overlay {
            background-color: rgba(0, 0, 0, 0.5);
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        h1 {
            font-size: 60px;
            margin: 0;
            animation: typing 4s steps(12), blink 0.75s step-end infinite;
            white-space: nowrap;
            overflow: hidden;
            border-right: 4px solid #fff;
        }
        p {
            font-size: 24px;
            margin: 20px;
            opacity: 0;
            animation: fadeIn 2s forwards;
            animation-delay: 4s;
        }
        .heart {
            font-size: 100px;
            animation: beat 1s infinite alternate;
        }
        @keyframes beat {
            to { transform: scale(1.2); }
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink {
            50% { border-color: transparent }
        }
        @keyframes fadeIn {
            to { opacity: 1 }
        }
        /* 飘落的爱心 */
        .heart-fall {
            position: fixed;
            top: -10%;
            font-size: 24px;
            color: pink;
            opacity: 0.8;
            animation: fall linear infinite;
        }
        @keyframes fall {
            to {
                transform: translateY(110vh) rotate(360deg);
                opacity: 0;
            }
        }
        /* 点击出现的爱心 */
        .click-heart {
            position: absolute;
            font-size: 24px;
            color: red;
            animation: rise 1s forwards;
        }
        @keyframes rise {
            to {
                transform: translateY(-100px);
                opacity: 0;
            }
        }
        /* 烟花效果 */
        .firework {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 5px;
            height: 5px;
            background: transparent;
            border-radius: 50%;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
            animation: firework 2s ease-out infinite;
        }
        @keyframes firework {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(100);
                opacity: 0;
            }
        }
        /* 飘动的气球 */
        .balloon {
            position: absolute;
            bottom: -100px;
            left: calc(50% - 50px);
            width: 100px;
            height: 150px;
            background: radial-gradient(circle at 50% 50%, red, darkred);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% {
                bottom: -100px;
                transform: translateX(0);
            }
            50% {
                bottom: 110vh;
                transform: translateX(-50px);
            }
            100% {
                bottom: -100px;
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
<div class="overlay">
    <h1>亲爱的 [宝宝]</h1>
    <div class="heart">❤️</div>
    <p>自从遇见你，我的世界变得更加美好。</p>
    <p>愿我们永远甜蜜。</p>
    <p>爱你的哦</p>
</div>
<!-- 添加飘落的爱心 -->
<div id="heart-container"></div>
<!-- 添加烟花效果 -->
<div class="firework"></div>
<!-- 添加飘动的气球 -->
<div class="balloon"></div>

<!-- 添加背景音乐 -->
<audio autoplay loop>
    <source src="your-music-file.mp3" type="audio/mpeg">
</audio>

<script>
    // 创建飘落的爱心效果
    const heartContainer = document.getElementById('heart-container');

    function createHeart() {
        const heart = document.createElement('div');
        heart.classList.add('heart-fall');
        heart.style.left = Math.random() * 100 + 'vw';
        heart.style.animationDuration = Math.random() * 5 + 5 + 's';
        heart.innerText = '💖';
        document.body.appendChild(heart);

        setTimeout(() => {
            heart.remove();
        }, 10000);
    }

    setInterval(createHeart, 500);

    // 点击出现爱心
    document.addEventListener('click', function(e) {
        const heart = document.createElement('div');
        heart.classList.add('click-heart');
        heart.style.left = e.pageX - 10 + 'px';
        heart.style.top = e.pageY - 10 + 'px';
        heart.innerText = '💖';
        document.body.appendChild(heart);
        setTimeout(() => {
            heart.remove();
        }, 1000);
    });

    // 烟花效果
    function createFirework() {
        const firework = document.createElement('div');
        firework.classList.add('firework');
        firework.style.left = Math.random() * 100 + 'vw';
        firework.style.top = Math.random() * 100 + 'vh';
        firework.style.animationDuration = '2s';
        document.body.appendChild(firework);
        setTimeout(() => {
            firework.remove();
        }, 2000);
    }

    setInterval(createFirework, 3000);

    // 飘动的气球效果
    function createBalloon() {
        const balloon = document.createElement('div');
        balloon.classList.add('balloon');
        balloon.style.left = Math.random() * 100 + 'vw';
        balloon.style.animationDuration = Math.random() * 5 + 5 + 's';
        document.body.appendChild(balloon);
        setTimeout(() => {
            balloon.remove();
        }, 10000);
    }

    setInterval(createBalloon, 4000);
</script>
</body>
</html>
